<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Application sevice adim console</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="mobile client service">
    <meta name="author" content="izinin">

    <!-- Le styles -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
       <a class="brand" href="#">Hi {{ username }} !</a>
		<ul class="nav">
		  <li>
		  <a id="register" href="#" role="button" class="btn btn-link">Register app</a>
		  </li>
		</ul>
		<ul class="nav pull-right">
		  <li>
		  <form  class="form-inline" action="." method="post">
		  	<input type="hidden" name="authLogout" value="logout" />
    		<button class="btn btn-link">Logout</button>	
		  </form>
		  </li>
		</ul>
      </div>
    </div>

    <div class="container">
    
<!-- Modal -->
          <div id="registerAppModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3 id="myModalLabel">Register application</h3>
            </div>
            <div class="modal-body">
			  <form  id="addForm" class="form-horizontal"action="." method="post"  onsubmit="return validateForm()">
				  <div class="control-group">
				    <label class="control-label" for="appID">Application ID</label>
				    <div class="controls">
				      <input type="text" name="appID" placeholder="id from Store">
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" for="appName">Application name</label>
				    <div class="controls">
				      <input type="text" name="appName">
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" for="appDescr">Description</label>
				    <div class="controls">
				      <textarea rows="3" name="appDescr"></textarea>
				    </div>
				  </div>
				  <div class="control-group">
				    <label class="control-label" for="appService">Service</label>
				    <div class="controls">
						<select name="appService">
						  <option>Try and Buy</option>
						  <option selected>Score board</option>
						</select>
				    </div>
				  </div>
			  </form>
            </div>
            <div class="modal-footer">
              <button class="btn" data-dismiss="modal">Close</button>
              <button class="btn btn-primary" onclick="javascript:$('#addForm').submit()">Save changes</button>
            </div>
        </div>
<!-- Modal -->

	{% if recordsTrynBuy or recordsScoreBoard %}
		<table class="table table-bordered">
           <thead>
                <th>Select</th>
                <th></th>
                <th>Application KEY</th>
                <th>Service</th>
                <th>Application name</th>
                <th>Application description</th>
           </thead>
	{% for rec in recordsTrynBuy %}
		  <tr>
		    <td><input type="checkbox" /></td>
		    {% if rec.enabled %}
		    	<td>enabled</td>
		    {% else %}
		    	<td>disabled</td>
		    {% endif %}
		    <td>{{ rec.appKey }}</td>
		    <td>{{ rec.appService }}</td>
		    <td>{{ rec.appName }}</td>
		    <td>{{ rec.appDescr }}</td>
		  </tr>
	{% endfor %}
	{% for rec in recordsScoreBoard %}
		  <tr>
		    <td><input type="checkbox" /></td>
		    {% if rec.enabled %}
		    	<td>enabled</td>
		    {% else %}
		    	<td>disabled</td>
		    {% endif %}
		    <td>{{ rec.appKey }}</td>
		    <td>{{ rec.appService }}</td>
		    <td>{{ rec.appName }}</td>
		    <td>{{ rec.appDescr }}</td>
		  </tr>
	{% endfor %}
		</table>
	{% endif %}

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript">
        $(document).ready(function(){
             $('#register').click(function() {
                 $('#registerAppModal').modal('show');
             });
        });
       
		function validateForm(){
		    var result=true;
		    $(".control-group").each(function(index) {
                var obj = $(this).find(":input");
                if(!obj.is('select')){
                    var value = obj.attr("value");
                    if (value==null || value==""){
                        $(this).attr('class', 'control-group error');
                        $('#registerAppModal').modal('show');
                        result=false;
                    }
                }
            });
            return result;
        }
	</script>
  </body>
</html>